<template>
  <div>
    <h1>App count:{{ count }}</h1>

    <hr />

    <Child ref="Child" />
    <!-- 父组件解绑子组件所有自定义事件 -->
    <button @click="$refs.Child.$off()">解绑子组件Child的所有自定义事件</button>
  </div>
</template>

<script>
  import Child from "./components/Child.vue";
  export default {
    name: "App",
    components: {
      Child,
    },
    data() {
      return {
        count: 1,
      };
    },
    methods: {
      fn(a, b) {
        console.log(a, b);
      },
      addOne() {
        this.count++;
      },
    },
    mounted() {
      //  在初始化的时候绑定自定义事件
      this.$refs.Child.$on("add-one", this.addOne);
      // $once只执行一次
      this.$refs.Child.$once("addn", this.addOne);
    },
  };
</script>

<style></style>
